<template>
   
       <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
       </el-breadcrumb>
        <el-row :gutter="10">
               <el-col :span="8">
                   <el-input
                        placeholder="请输入内容"
                        v-model="searchContent">
                        <template #prefix>
                        <i class="el-input__icon el-icon-search"></i>
                        </template>
                    </el-input>
               </el-col>
               <el-col :span="1">
                    <el-button type="danger" @click="handleSearch">搜索</el-button>
               </el-col>
               <el-col :span="2">
                    <el-button type="primary">添加用户</el-button>
               </el-col>
        </el-row>
       <el-card class="box-card">
           <div class="text item">
        
           <el-table
           border
            :data="userData"
            style="width: 100%">

            <el-table-column
            prop="date"
            label="日期"
            width="150">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="province"
            label="省份"
            width="120">
            </el-table-column>
            <el-table-column
            prop="city"
            label="市区"
            width="120">
            </el-table-column>
            <el-table-column
            prop="address"
            label="地址"
            width="600">
            </el-table-column>
            <el-table-column
            prop="zip"
            label="邮编"
            width="120">
            </el-table-column>
            <el-table-column
            label="操作"
            width="200">
            <template #default="scope">
                <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button @click="handleEditor(scope.row)" type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
        </el-pagination>
          </div>
       </el-card>
 

</template>

<script>
import { onMounted, reactive, toRefs } from '@vue/runtime-core';
import axios from "axios";

function userLoadData(state){
    const params ={
        pageNumber: state.currentPage,
        pageSize: state.pageSize
    }
    console.log("use axios to get user info from backend");
    // axios.get("your_backend",{params}).then((res)=>{
    //     state.userData=res.data；
    //       state.total=res.data.totalCount
    // })
    // 模拟下，没后台。
    state.userData.push(
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }
    )
}

function useSearch(state){
  const handleSearch=()=>{
    //reset to page 1
    state.currentPage=1;
    const params ={
        pageNumber: state.currentPage,
        pageSize: state.pageSize
    };
      console.log('search ' + state.searchContent);
      console.log("update table data");
      console.log("update pagination data");
  };
  return{
    handleSearch,
  }
}

export default {
    setup(){
      const state = reactive({
          searchContent:'',
          userData:[],
          total:4,
          currentPage:1,
          pageSize:5,
      });
      const handleSizeChange = (val) => {
        console.log('use axios get data')
        console.log(`每页 ${val} 条`);
        console.log('reset userData,currentPage,pageSize')
      };
      const handleCurrentChange = (val) => {
        console.log(`当前页: ${val}`);
      };

      onMounted(() => {
          userLoadData(state);
      });

      return{
          ...toRefs(state),
          handleSizeChange,
          handleCurrentChange,
          ...useSearch(state),
      }
    },
};
</script>

<style>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
.el-table__header tr,
.el-table__header th {
    padding: 2;
    height: 30px;
    line-height: 30px;
}
.el-table__body tr,
.el-table__body td {
    padding: 1;
    height: 30px;
    line-height: 30px;
}
</style>
